<template>
  <view class="page">
    <u-search :show-action="true" v-model="queryName" :placeholder="keyWord" actionText="搜索" :animation="true" @custom="onClick" @search="onClick"></u-search>
    <u-cell v-if="hotWord.length" title="热门推荐"></u-cell>
    <view v-if="hotWord.length" class="page__content">
      <view v-for="(item, index) in hotWord" :key="index" class="page__item">
        <text class="page__item--word" @tap="choose" :data-variable="item">{{item}}</text>
      </view>
    </view>
    <u-cell title="历史搜索">
      <u-icon slot="right-icon" name="close-circle" class="custom-icon" @tap="closeChoose"></u-icon>
    </u-cell>
    <view class="history__box">
      <view v-for="(item, index) in historyWords" :key="index" class="page__item">
        <text class="page__item--word" @tap="choose" :data-variable="item">{{item}}</text>
      </view>
    </view>
  </view>
</template>

<script lang='ts'>
  import {
    Component,
    Vue
  } from 'vue-property-decorator'

  @Component({})
  export default class SearchClass extends Vue {
    historyWords: Array < any >= [] // 历史搜索词
    hotWord: Array < any >= [] // 热门关键词
    queryName: string = "" // 搜索词
    chanel: number = 2 //  2商超分类页  4首页搜索组件
    keyWord: string = "" // 输入框若提示
    // 页面周期函数--监听页面加载
    onLoad(option) {
      const historyWords = uni.getStorageSync("historyWords") ?
        JSON.parse(uni.getStorageSync("historyWords")) :
        [];
      let hotWord = [];
      let keyWord = "";
      const chanel = Number(option.chanel);
      // 如果来自首页搜索组件，需要带上formate
      if (chanel === 4) {
        const params = JSON.parse(option.formData || "{}");
        hotWord = params.hotWord || [];
        keyWord = params.keyWord;
      }
      this.setData({
        historyWords,
        hotWord: hotWord.filter(i => i !== ""),
        keyWord,
        chanel,
      });
    }

    /**
     * 输入值改变时实时更新
     */
    // onChangePop(e) {
    //   this.setData({
    //     queryName: e.detail,
    //   });
    // }

    /**
     * 点击搜索
     */
    onClick() {
      this.addStoreage();
      this.queryName =this.queryName === "" ? this.keyWord : this.queryName;
      uni.navigateTo({
        url: `/subcontract/pages/spellPage/second-catgoods/second-catgoods?chanel=${this.chanel}&queryName=${this.queryName}`,
      });
    }

    /**
     * 选定搜索词
     */
    choose(event) {
      const queryName = event.currentTarget.dataset.variable;
      this.setData({
        queryName
      }, () => {
        this.onClick();
      });
    }

    /**
     * 清除按钮
     */
    closeChoose() {
      let historyWords = uni.getStorageSync("historyWords") ?
        JSON.parse(uni.getStorageSync("historyWords")) :
        [];
      if (historyWords.length > 0) {
        historyWords = [];
        uni.removeStorageSync("historyWords");
        this.setData({
          historyWords
        });
        uni.showToast({
          title: "删除成功",
          icon: "none",
          duration: 800,
        });
      }
    }

    /**
     * 历史记录搜索放入storeage
     */
    addStoreage() {
      const value = this.queryName;
      const historyWords = uni.getStorageSync("historyWords") ?
        JSON.parse(uni.getStorageSync("historyWords")) :
        [];
      if (historyWords.findIndex(i => i === value) !== -1) {
        historyWords.splice(
          historyWords.findIndex(i => i === value),
          1,
        );
      }
      // 点击热门搜索的关键字也要放入历史搜索记录中
      // && !(this.data.hotWord as any).includes(value)
      if (!historyWords.includes(value) && value) {
        historyWords.unshift(value);
      }
      if (historyWords.length > 6) historyWords.pop();
      this.setData({
        historyWords
      });
      uni.setStorageSync("historyWords", JSON.stringify(historyWords));
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    background: #fff;
    height: 100vh;
    .page__pop--search {
      color: #fff;
      font-weight: 800;
      margin-right: 10px;
      background: #fe5468;
      padding: 0 20px;
      border-radius: 20px;
    }
    .page__content{
      display: flex;
      flex-wrap: wrap;
    }
    .page__item {
      padding: 7px 10px;
      text-align: center;
      &--word {
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        border-radius: 50rpx;
        background: #f5f5f5;
        font-size: 14px;
        padding: 20rpx;
        text-align: center;
      }
    }
  }

  .custom-icon {
    color: #bbbbbb;
    font-size: large;
  }
  .history__box{
    @include flex(flex-start);
    flex-wrap: wrap;
  }
</style>